<template>
  <div class="app-container  bg-gray">
    <el-row class="box-1">
      <el-col :span="24">
        <el-card>
          <div class="header">
            <div>
              <el-input v-model="searchValue" placeholder="请输入内容" class="search-input" @change="search" />
              <el-button type="success" class="bg-green" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
            <el-button type="success" class="bg-green" icon="el-icon-circle-plus" @click="toModifyRoles('新增角色')">添加角色</el-button>
          </div>
          <el-table :data="tableData" border>
            <el-table-column prop="id" label="ID" width="100" sortable />
            <el-table-column prop="name" label="项目名称" min-width="160"/>
            <el-table-column label="操作" width="200" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="success" size="small" icon="el-icon-edit" circle class="bg-green" @click="toModifyRoles('编辑角色')" />
                <el-button type="danger" size="small" icon="el-icon-delete" circle @click="toDelete" />
              </template>
            </el-table-column>
          </el-table>
          <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" class="pagination" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',

      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      total: 30,

      tableData: [{
        id: 190,
        name: '官网推广'
      }, {
        id: 190,
        name: '腾讯云体验'
      }, {
        id: 190,
        name: '云市场微信群内推'
      }]
    }
  },
  watch: {
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    },
    search() {
      // console.log(this.searchValue);
    },
    toDelete() {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      });
    },
    toModifyRoles(title) {
      this.isShow = false;
      this.$router.push({
        path: '/permissions/roles/modifyRole',
        query: { title: title }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.box-1 {
  .header {
    @include flex-row(center, space-between);
    padding-bottom: 15px;
    .search-input {
      width: 240px;
    }
  }
}

.dialog {
  .el-input {
    width: 80%;
  }
}
</style>
